﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}

{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/chart/chart.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/moment.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">
	//single date
	$('#daterange').daterangepicker({
		startDate: moment().add(-1,'month'),//表示开始时间为今天的基础上减1月
		autoApply: true,
		locale: {
			format:'YYYY/MM/DD',
		},
		ranges: {
            '本周': [moment().startOf('week'), moment().endOf('week')],
            '本月': [moment().startOf('month'), moment().endOf('month')]
        },
        startDate: moment().startOf('month'),
        endDate: moment().endOf('month')
	});
	function drawChart(){
		var daterange = $("#daterange").val();
		$.ajax({
		    url: "{:url('internet/analysisJson')}?daterange=" + daterange,
		    method: "GET",
		    dataType : 'JSON',
		    success: function(data) {
		    	//将json解析成js对象
		      	// var data = JSON.parse(data);

		      	//订单总计数据显示

		      	$('#total_count').text(data.total_count);
		      	$('#total_count_growth_rate').text(data.total_count_growth_rate);
		      	$('#autohome_count').text(data.autohome_count);
		      	$('#autohome_count_growth_rate').text(data.autohome_count_growth_rate);
		      	$('#yiche_count').text(data.yiche_count);
		      	$('#yiche_count_growth_rate').text(data.yiche_count_growth_rate);

		      	// -------------------------------
		      	//主趋势线图

		      	var line_data = data.line_data;

	      		var label = [];
		      	var thisData = [];
		      	var lastData = [];

		     	for(var i in line_data){
			        label.push(line_data[i].day);
			        thisData.push(line_data[i].thisNumber);
			        lastData.push(line_data[i].lastNumber);
			    }

			    var line_conifg = {
			        type: "line",
			        data: {
			            labels: label,
			            datasets: [{
			                label: "本周期",
			                borderColor: "#e76c90",
			                pointBackgroundColor: "#e76c90",
			                pointHoverBorderColor: "#e76c90",
			                pointHoverBackgroundColor: "#e76c90",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: thisData
			            }, {
			                label: "上周期",
			                borderColor: "#5d5386",
			                pointBackgroundColor: "#5d5386",
			                pointHoverBorderColor: "#342868",
			                pointHoverBackgroundColor: "#342868",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: lastData
			            }]
			        },
			        options: {
			        	//标题
			        	title: { 
					        display: false,
					        text: '访问统计',
					        fontColor: "#f00"
					    },
					    //是否显示图例
			            legend: {
			                display: true
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: false,
			                yPadding: 10
			            },
			            scales: {
			                yAxes: [{
			                    ticks: {
			                        display: true,
			                        stepSize: 1,
			                        beginAtZero: true
			                    },
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    }
			                }],
			                xAxes: [{
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    },
			                    ticks: {
			                        display: true
			                    }
			                }]
			            },
			            aspectRatio: 4,
			            maintainAspectRatio:false
			        }
			    };

			    $('#line_canvas').remove(); // this is my <canvas> element
				$('#line_chart').append('<canvas id="line_canvas" height="200"></canvas>');

			    var a = document.getElementById("line_canvas").getContext("2d");
			    var line_chart = new Chart(a,line_conifg);

			    // -------------------------------
		      	//渠道区间占比

		      	var channelRatio_data = data.channelRatio;
		      	console.log(data.channelRatio);

		        var channelRatio_config = {
			        type: "pie",
			        data: {
			            labels: channelRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: channelRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#channelRatio_canvas').remove(); // this is my <canvas> element
				$('#channelRatio_chart').append('<canvas id="channelRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("channelRatio_canvas").getContext("2d");
			    var channelRatioChart = new Chart(a, channelRatio_config);
			    channelRatioChart.update();


			    // -------------------------------
		      	//线索有效率

		      	var validRatio_data = data.validRatio;

		        var validRatio_config = {
			        type: "pie",
			        data: {
			            labels: validRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: validRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#validRatio_canvas').remove(); // this is my <canvas> element
				$('#validRatio_chart').append('<canvas id="validRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("validRatio_canvas").getContext("2d");
			    var validRatioChart = new Chart(a, validRatio_config);
			    validRatioChart.update();

			    // -------------------------------
		      	//有效线索邀约率

		      	var inviteRatio_data = data.inviteRatio;

		        var inviteRatio_config = {
			        type: "pie",
			        data: {
			            labels: inviteRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: inviteRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#inviteRatio_canvas').remove(); // this is my <canvas> element
				$('#inviteRatio_chart').append('<canvas id="inviteRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("inviteRatio_canvas").getContext("2d");
			    var inviteRatioChart = new Chart(a, inviteRatio_config);
			    inviteRatioChart.update();

			    // -------------------------------
		      	//总线索成交率

		      	var dealRatio_data = data.dealRatio;

		        var dealRatio_config = {
			        type: "pie",
			        data: {
			            labels: dealRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: dealRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#dealRatio_canvas').remove(); // this is my <canvas> element
				$('#dealRatio_chart').append('<canvas id="dealRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("dealRatio_canvas").getContext("2d");
			    var dealRatioChart = new Chart(a, dealRatio_config);
			    dealRatioChart.update();
			},
		    error: function(data) {
		      console.log(data);
		    }
		});
	}
	$(document).ready(function(){
		drawChart();
	})
</script>
{/block}

//页面名称
{block name="PageName"}
网销客流概览
{/block}

//自定义Modal
{block name="Modal"}{/block}

//主页面
{block name="main"}
<div class="row flex-row">
	<div class="col-xl-3 col-sm-6">
		<div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>查询日期范围</h4>
            </div>
            <div class="widget-body">
                <div class="form-group">
                    <label class="form-control-label">日期范围</label>
                    <input type="text" class="form-control" id="daterange" name="daterange">
                </div>
                <div class="text-right">
                    <button class="btn btn-gradient-01" onclick="drawChart()">确定</button>
                </div>
            </div>
        </div>
	</div>
	<div class="col-xl-3 col-sm-6">
        <div class="widget-32 widget-image bg-image">
            <div class="overlay"></div>
            <div class="content">
                <div id="events-day" style="color:#e76c90;font-size:1.2rem">总线索量</div>
                <div id="total_count" style="color:#fff;font-size:8rem;font-weight:600">0</div>
                <div id="total_count_growth_rate" style="color:#aea9c3;font-size:1rem">0</div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6">
        <div class="widget-32 widget-image bg-image">
            <div class="overlay"></div>
            <div class="content">
                <div id="events-day" style="color:#e76c90;font-size:1.2rem">汽车之家</div>
                <div id="autohome_count" style="color:#fff;font-size:8rem;font-weight:600">0</div>
                <div id="autohome_count_growth_rate" style="color:#aea9c3;font-size:1rem">0</div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6">
        <div class="widget-32 widget-image bg-image">
            <div class="overlay"></div>
            <div class="content">
                <div id="events-day" style="color:#e76c90;font-size:1.2rem">易车网</div>
                <div id="yiche_count" style="color:#fff;font-size:8rem;font-weight:600">0</div>
                <div id="yiche_count_growth_rate" style="color:#aea9c3;font-size:1rem">0</div>
            </div>
        </div>
    </div>
</div>
<div class="row flex-row">
	<div class="col-xl-12">
        <div class="widget widget-07 has-shadow">
            <!-- Begin Widget Header -->
            <div class="widget-header bordered no-actions d-flex align-items-center">
            	<H2>网销线索趋势图</H2>
            </div>
            <!-- End Widget Header -->
            <!-- Begin Widget Body -->
            <div class="widget-body">
               	<div class="chart" id="line_chart">
                    <canvas id="line_canvas"></canvas>
                </div>
            </div>
            <!-- End Widget Body -->
            <!-- Begin Widget Footer -->
            <div class="widget-footer d-flex align-items-center">
            </div>
            <!-- End Widget Footer -->
        </div>
    </div>
</div>
<div class="row flex-row">
	<div class="col-xl-3">
        <!-- 线索渠道占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>线索渠道占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="channelRatio_chart">
                    <canvas id="channelRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 线索渠道占比 -->
    </div>
    <div class="col-xl-3">
        <!-- 线索有效率 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>线索有效率</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="validRatio_chart">
                    <canvas id="validRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 线索有效率 -->
    </div>
    <div class="col-xl-3">
        <!-- 有效线索邀约率 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>有效线索邀约率</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="inviteRatio_chart">
                    <canvas id="inviteRatio_canvas" ></canvas>
                </div>
            </div>
        </div>
        <!-- 有效线索邀约率 -->
    </div>
    <div class="col-xl-3">
        <!-- 有效线索邀约率 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>总线索成交率</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="dealRatio_chart">
                    <canvas id="dealRatio_canvas" ></canvas>
                </div>
            </div>
        </div>
        <!-- 有效线索邀约率 -->
    </div>
</div>
{/block}
